<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div class="layui-form-item">
    <form class="layui-form">
        <div class="layui-inline">
            <label class="layui-form-label">名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="search-role-name" autocomplete="off" placeholder="请输入名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态:</label>
            <div class="layui-input-inline">
                <select id="search-role-status">
                    <option value="">请选择</option>
                    <option value="1">有效</option>
                    <option value="0">无效</option>
                </select>
            </div>
        </div>
        <button class="layui-btn" id="search-role-btn" type="button" >搜索</button>
    </form>
</div>
<script type="text/html" id="role-head-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="goEdit"><i class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>批量删除</button>
    </div>
</script>
<script type="text/html" id="role-row-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-role">编辑</a>
</script>
<table id="role-table" lay-filter="role-table"></table>
<!-- th:inline="none"不让模板引擎解析，否则会报错-->
<script type="text/javascript" th:inline="none">
    //layui.use只能出现一次
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        form.render('select');//新追加的form需要重新渲染
        table.render({
            id: "role-table",
            elem: '#role-table'
            , toolbar: '#role-head-bar'
            , cellMinWidth: 80
            , url: 'role.html?act=table' //数据接口
            , page: true //开启分页
            , cols: [[
                {type:'checkbox'},
                {field: 'id', title: 'ID', sort: true}
                , {field: 'name', title: '角色名'}
                , {field: 'remark', title: '备注'}
                , {
                    field: 'status', title: '状态', templet: function (d) {
                        return d.status == 1 ? '<span style="color: #5FB878;">有效</span>' : '<span style="color: #FF5722">无效</span>'
                    }
                }, {fixed: 'right', title: '操作', toolbar: '#role-row-bar', width: 180}
            ]]
        });
        $("#search-role-btn").click(function(){
            table.reload('role-table', {
                where: {
                    name:$("#search-role-name").val(),
                    status:$("#search-role-status").val()
                } //设定异步数据接口的额外参数
            });
        });
        //头工具栏事件
        table.on('toolbar(role-table)', function (obj) {
            switch (obj.event) {
                case 'goEdit':
                    openEditWindow();
                    break;
                case 'delete':
                    var checkStatus = table.checkStatus('role-table');
                    var rows=checkStatus.data;


                    if(rows.length>0){
                        var ids=new Array();
                        $.each(rows,function(i,o){
                            ids.push(o.id);
                        })
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: 'role.html?act=delete',
                                data: "ids="+ids,
                                method: 'post',
                                success: function (result) {
                                    table.reload('role-table', {});

                                }
                            })
                            layer.close(index);
                        })
                    }
                    break;
            }
            ;
        });
        table.on('tool(role-table)', function (obj) { //
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent=='edit-role'){
                openEditWindow();
                //或者用ajax去数据库查
                form.val('role-edit-form', {
                    "name": data.name // "name": "value"
                    ,"status": data.status
                    ,"remark": data.remark,
                    "id":data.id
                })
            }
        })
        function openEditWindow(){
            layer.open({
                type: 1,
                content: $('#role-edit-layer').html(),
                title: '编辑角色'
                , area: ['400px', '300px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    $.ajax({
                        url: 'role.html?act=edit',
                        data: $("#role-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.status) {
                                table.reload('role-table', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                        }
                    })
                }
            });
            form.render('select');
        }
    })
</script>
<script type="text/html" id="role-edit-layer">
    <form id="role-edit-form" style="width: 80%" class="layui-form" lay-filter="role-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入角色名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" required lay-verify="required" placeholder="请输入备注" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status">
                    <option value="">请选择</option>
                    <option value="1">有效</option>
                    <option value="0">无效</option>
                </select>
            </div>
        </div>
    </form>
</script>
</html>